<template>
  <div class="box">
    <!-- part3-团员发展-->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="班级对比" name="first">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="平台类别:">
            <el-select v-model="platformType1" placeholder="请选择">
              <el-option
                v-for="item in platformOption"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级:">
            <el-select v-model="firstGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份:">
            <el-select v-model="firstYear" placeholder="请选择">
              <el-option
                v-for="item in firstOption.years"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="firstSearch(platformType1)"
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <div id="firstChart" style="width: 90%; height: 400px"></div>

        <!-- 显示年级内班级对比信息 -->
        <el-table
          :data="firstData"
          style="width: 90%; margin: 0 auto; margin-top: 50px"
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <el-table-column prop="type" label="类型"> </el-table-column>
                <el-table-column prop="platId" label="ID号"> </el-table-column>
                <el-table-column prop="name" label="名称"> </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="班级" prop="class"> </el-table-column>
          <el-table-column label="新媒体平台数" prop="list.length">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="历年数据" name="second">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="平台类别:">
            <el-select v-model="platformType2" placeholder="请选择">
              <el-option
                v-for="item in platformOption"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级:">
            <el-select v-model="secondGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="secondClass" placeholder="请选择">
              <el-option
                v-for="item in secondOption.classes"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="secondSearch(platformType2)"
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <div id="secondChart" style="width: 1000px; height: 400px"></div>

        <el-table
          :data="secondData"
          style="width: 90%; margin: 0 auto; margin-top: 50px"
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <el-table-column prop="type" label="类型"> </el-table-column>
                <el-table-column prop="platId" label="ID号"> </el-table-column>
                <el-table-column prop="name" label="名称"> </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="年份" prop="year"> </el-table-column>
          <el-table-column label="新媒体平台总数" prop="list.length">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}
</style>

<script>
import { getGradeClassesYears } from "@/api/gradeClassesYears"
import { getGradeCommuPlatform, getHistoryCommuPlatform, getGradeShowPlatform, getHistoryShowPlatform } from '@/api/part4/platform'
export default {
  data() {
    return {
      platformOption: [
        {
          id: 1,
          type: "交流平台"
        },
        {
          id: 2,
          type: "展示平台"
        }
      ],
      platformType1: 1,
      platformType2: 1,
      options: [
        {
          grade: 2017,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2017, 2018, 2019, 2020]
        },
        {
          grade: 2018,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2018, 2019, 2020]
        },
        {
          grade: 2019,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2019, 2020]
        },
        {
          grade: 2020,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2020]
        }
      ],
      firstGrade: 2017,
      firstOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ],
        years: [2017, 2018, 2019, 2020]
      },
      firstYear: 2020,
      firstData: [
        {
          class: '软件工程1班',
          list: [
            {
              type: 'qq群',
              platId: '202020',
              name: '班群'
            },
          ]
        },
        {
          class: '软件工程2班',
          list: [
            {
              type: 'qq群',
              platId: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              platId: '202020',
              name: '班群'
            },
          ]
        },
        {
          class: '软件工程3班',
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },]
        }, {
          class: '软件工程4班',
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        }, {
          class: '软件工程5班',
          list: [
          ]
        }, {
          class: '软件工程6班',
          list: [
          ]
        }, {
          class: '软件工程7班',
          list: [
          ]
        }, {
          class: '软件工程8班',
          list: [
          ]
        }, {
          class: 'AI',
          list: [
          ]
        }, {
          class: '大数据',
          list: [
          ]
        }, {
          class: '数字媒体',
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        },
      ],
      secondGrade: 2017,
      secondOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ],
        years: [2017, 2018, 2019, 2020]
      },
      secondClass: '软件工程1班',
      secondData: [
        {
          year: 2017,
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        },
        {
          year: 2018,
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        },
        {
          year: 2019,
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        },
        {
          year: 2020,
          list: [
            {
              type: 'qq群',
              id: '202020',
              name: '班群'
            },
            {
              type: '微信群',
              id: '202020',
              name: '班群'
            },
          ]
        }
      ],
      activeName: 'first'
    }
  },
  mounted: function () {
    //获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      //初始化first,second
      this.firstGrade = this.options[0].grade;
      this.firstYear = this.options[0].years[0];
      this.secondGrade = this.options[0].grade;
      this.secondClass = this.options[0].classes[0];
      //获取原始对比数据
      //1.年级各班数据
      this.firstSearch(this.platformType1);
      //2.班级历史数据
      this.secondSearch(this.platformType2);
      //处理数据并渲染
    }).catch(err => {
      console.log(err)
    })
  },
  watch: {
    secondGrade: function (val) {
      this.secondOption = this.options.find(function (x) { return x.grade === val; })
      this.secondClass = this.secondOption.classes[0];
    },
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val; })
      this.firstYear = this.firstOption.years[0];
    }
  },
  methods: {
    firstSearch(platformType1) {//查询一个年级各班对应的数据
      let data = {
        grade: this.firstGrade,
        year: this.firstYear
      };

      if (platformType1 == 1) {
        getGradeCommuPlatform(data).then(response => {
            this.firstData=response.data.data;
          this.drawFirstChart();
          console.log("commu1");
        }).catch(err => {
          console.log(err);
        })
      } else {
        getGradeShowPlatform(data).then(response => {
            this.firstData=response.data.data;
          this.drawFirstChart();
          console.log("show1");
        }).catch(err => {
          console.log(err);
        })
      }

    },
    secondSearch(platformType2) {//查询一个班级对应各年份的数据
      let user = this.secondGrade + "级" + this.secondClass + "团支部";
      let data = { user: user };

      if (platformType2 == 1) {
        getHistoryCommuPlatform(data).then(response => {
            this.secondData=response.data.data;
          this.drawSecondChart();
        }).catch(err => {
          console.log(err);
        })
      } else {
        getHistoryShowPlatform(data).then(response => {
            this.secondData=response.data.data;
          this.drawSecondChart();

        }).catch(err => {
          console.log(err);
        })
      }
    },
    drawFirstChart() {
      let classes = this.firstData.map(x => { return x.class })
      let numbers = this.firstData.map(x => { return x.list.length }) // 生成数组
      let platformType = '';
      if (this.platformType1 == 1) {
        platformType = '交流';
      } else {
        platformType = '展示';
      }
      let title = this.firstGrade + '级各班' + platformType + '平台对比'

      // 基于准备好的dom，初始化echarts实例
      let firstChart = this.$echarts.init(document.getElementById('firstChart'))
      // 绘制图表
      firstChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: "#fffff"
        },
        tooltip: {},
        xAxis: {
          data: classes,
          axisLabel: {
            interval: 0,
            rotate: 45,//倾斜度 -90 至 90 默认为0
            margin: 11,
            textStyle: {
              color: "#fffff"
            }
          }
        },
        yAxis: {
          minInterval: 1
        },
        series: [{
          name: platformType + '平台数',
          type: 'bar',
          data: numbers,
          barWidth: 30,//柱图宽度
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#1890ff'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          }
        },
        ]
      });
    },
    drawSecondChart() {
      let years = this.secondData.map(x => { return x.year })
      let numbers = this.secondData.map(x => { return x.list.length }) // 生成数组
      let platformType = '';
      if (this.platformType2 == 1) {
        platformType = '交流';
      } else {
        platformType = '展示';
      }
      let title = this.secondGrade + "级" + this.secondClass + platformType + '平台历史数据';

      let secondChart = this.$echarts.init(document.getElementById('secondChart'))


      secondChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: "#fffff"
        },
        xAxis: {
          type: 'category',
          data: years
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: numbers,
          type: 'line',
          name: platformType + '平台数',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#1890ff'
              }
            }
          }
        }]
      });
    },
  }
}
</script>